<script setup>
import $http from '@/utils/http'
import { ref, watch } from 'vue'
import { useToast, useMessage } from 'wot-design-uni'
import { useLivePusherStoreHook } from '@/stores/modules/livePusher'
import { useUserStoreHook } from '@/stores/modules/user'

import createForm from '@/components/create-form.vue'

const useLivePusherStore = useLivePusherStoreHook()
const useUserStore = useUserStoreHook()
const toast = useToast()
const message = useMessage()
const disabled = ref(false)
const showCreateKey = ref(false)
const activeFabKkey = ref(false)
const isLivePusherRoom = ref(false)
const livePusherRoomList = ref([
	{
		id: 1,
		created_at: "2024-07-18",
		updated_at: null,
		deleted_at: null,
		user_id: 1,
		live_broadcast_name: "看看把",
		live_broadcast_room: "26344363",
		live_broadcast_poster: "http://192.168.3.4:3000/livePusher/6f78f4f01c5f5b4effe94c86fa3ea3aa.jpg",
		status: 0,
		is_live_broadcast: 0,
		is_public: 0,
		airplay_no_public: null,
		deactivate_duration: null
	},
])

// 初始化数据
const init = async () => {
	await getLivePusherRoom()
	
	livePusherRoomList.value = useLivePusherStore.liveBroadcastList
	if(livePusherRoomList.value.length > 0) {
		isLivePusherRoom.value = false
	}
}

// 创建后重新在获取自己直播间
const getLivePusherRoom = async () => {
	const res = await $http.request({
		url: `/get-live-pusher-room-id?user_id=${useUserStore.userinfo.id}`,
		method: 'GET',
		header: {
			token: true
		}
	})
	if(res.code !== 200) {
		toast.show({
			position: 'bottom',
			msg: res.msg
		})
		return
	}
	useLivePusherStore.SET_LIVE_BROADCAST(res.data)
	livePusherRoomList.value = useLivePusherStore.liveBroadcastList
}

// 修改直播间
const reviseIcon = (itme) => {
	console.log(itme)
}

// 点击判断是创建或修改
const showToast = () => {
	console.log('创建')
	showCreate()
}

// 显示创建
const showCreate = () => {
	showCreateKey.value = !showCreateKey.value
}

// 判断是否展开create-icon
watch(disabled, (newValue, oldValue)=>{
	if(newValue !== oldValue) {
		showCreateKey.value = false
	}
})

// 创建成功
const createYesOn = () => {
	showCreateKey.value = false
	getLivePusherRoom()
}

init()
</script>

<template>
	<view class="create-page-box">
		<view class="live-pusher-room-list">
			<view class="live-pusher-room-itme" v-for="itme in livePusherRoomList" :key="itme.id">
				<image :src="itme.live_broadcast_poster" class="itme-img"></image>
				<view class="itme-box">
					<text class="itme-text">名称: {{ itme.live_broadcast_name }}</text>
					<text class="itme-text">直播号: {{ itme.live_broadcast_room }}</text>
					<text class="itme-text">创建时间: {{ itme.created_at }}</text>
					<view>
						<wd-tag custom-class="space">{{ itme.is_public ? '不公开' : '公开' }}</wd-tag>
						<wd-tag custom-class="space">{{ itme.status ? '禁止' : '正常' }}</wd-tag>
						<wd-tag custom-class="space">{{ itme.is_live_broadcast ? '在直播' : '未直播' }}</wd-tag>
					</view>
				</view>
				<view class="itme-revise-box">
					<wd-icon
						size="20px"
						name="edit"
						color="#dddddd"
						class="revise-icon"
						@click="reviseIcon(itme)"></wd-icon>
				</view>
			</view>
		</view>
		<wd-divider class="show-no" v-if="isLivePusherRoom" color="#bbbbbb">没有创建直播间</wd-divider>
	</view>
	<view class="create-box">
		<wd-fab
			v-model:active="disabled"
			:draggable="true" type="primary"
			position="right-bottom" direction="left">
			<wd-button @click="showToast" :disabled="!disabled" custom-class="custom-button" type="primary" round>
				<wd-icon name="add-circle" size="22px"></wd-icon>
			</wd-button>
		</wd-fab>
		<wd-overlay :show="showCreateKey" @click="showCreate">
		  <view class="wrapper-box">
		    <view class="block-box" @click.stop="">
					<createForm @success="createYesOn" />
				</view>
		  </view>
		</wd-overlay>
	</view>
	<wd-toast />
</template>

<style scoped lang="scss">
@import "@/common/common.scss";

.create-page-box {
	width: 100%;
	
	.live-pusher-room-list {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		
		.live-pusher-room-itme {
			width: 100%;
			overflow: hidden;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			background-color: $all-box-bg-color;
			
			display: flex;
			align-items: center;
			
			.itme-img {
				width: 20%;
				height: 180rpx;
				border-radius: 20rpx;
			}
			
			.itme-box {
				width: 80%;
				height: 180rpx;
				margin-left: 15rpx;
				box-sizing: border-box;
				
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				
				.itme-text {
					color: #dddddd;
					font-size: 25rpx;
					margin-bottom: 6rpx;
				}
				
				:deep(.space) {
				  margin-right: 10rpx;
				}
			}
			.itme-revise-box {
				width: 10%;
				height: 180rpx;
				padding-top: 20rpx;
				box-sizing: border-box;
			}
		}
	}
	
	.show-no {
		margin-top: 40rpx;
	}
	
	:deep(.loadmore) {
	  background-color: #f4f4f4;
	  margin: 20px 0;
	}
}

.create-box {
	:deep(.custom-button) {
	  min-width: auto !important;
	  box-sizing: border-box;
	  width: 32px !important;
	  height: 32px !important;
	  border-radius: 16px !important;
	  margin: 8rpx;
	}
	
	:deep(.custom-radio) {
	  height: 32px !important;
	  line-height: 32px !important;
	}
	
	.wrapper-box {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	}
	
	.block-box {
	  width: 95%;
	  height: 450px;
		overflow: hidden;
		border-radius: 10rpx;
	  background-color: #fff;
	}
}

</style>
